<template>
	<view class="page">
		<block v-if="data">
			<view class="blue-bg">
				<view :style="'height:' + systemInfo.statusBarHeight*2 + 'rpx'"></view>
				<view style="width: 100vw;height: 750rpx;"></view>
			</view>
			<view class="header">
				<view :style="'height:' + systemInfo.statusBarHeight*2 + 'rpx'"></view>
				<view class="f-row" style="padding-top: 30rpx;">
					<view class="the-date f-1">{{todayDateStr}}</view>
					<view class="data-operation f-column f-1 f-center">
						<view class="refresh-data" style="margin-bottom: 40rpx;position: relative;" @click="$navigate('notice')">
							<view v-show="data.mer_notice_log !== 0" style="position: absolute;width: 26rpx;height: 26rpx;border-radius: 13rpx;background-color: #FFFFFF;z-index: 99;left: 25rpx;top: -10rpx;
										line-height: 26rpx;font-size: 18rpx;color: #02a7ff;text-align: center;">{{data.mer_notice_log > 99 ? '...' : data.mer_notice_log}}</view>
							<image src="../../static/icons/message-white.png" mode="aspectFill"></image>
							<view class="des">公告列表</view>
						</view>
						<view class="refresh-data" @click="refreshData">
							<image :class="refreshClass" src="../../static/icons/refresh.png" mode="aspectFill"></image>
							<view class="des">刷新</view>
						</view>
					</view>
				</view>
				<view class="f-row">
					<view class="f-column f-1 p-lr-30">
						<view class="f-column f-center header-data" style="margin-bottom: 15rpx;">
							<view class="bold-data">{{data.today_all_money.money}}</view>
							<view class="data-des">今日营收金额 (含退款)</view>
						</view>
						<view class="f-column f-center header-data">
							<view class="thin-data">{{data.this_month_money.money}}</view>
							<view class="data-des">本月成交金额 (元)</view>
						</view>
					</view>
					<view class="f-column f-1 p-lr-30 x-center">
						<view class="f-column y-center header-data" style="margin-bottom: 15rpx;">
							<view class="bold-data">{{data.today_all_order}}</view>
							<view class="data-des">今日交易订单笔数</view>
						</view>
						<view class="f-column y-center header-data">
							<view class="thin-data">{{data.this_month_order}}</view>
							<view class="data-des">本月成交订单笔数</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer bg-white f-1">
				<view class="f-row f-1 y-center nav-icon p-lr-30">
					<view class="footer-icon">
						<image mode="aspectFill" src="../../static/icons/todayorder_icon.png"></image>
					</view>
					<view class="f-column f-1 x-center" @click="toOrderLst(2)">
						<view class="order-des">今日待发货订单</view>
						<view class="order-num">{{data.today_all_ship_order}}</view>
					</view>
				</view>
				<view class="f-row f-1 y-center nav-icon p-lr-30">
					<view class="footer-icon">
						<image mode="aspectFill" src="../../static/icons/todayrefund_icon.png"></image>
					</view>
					<view class="f-column f-1 x-center" @click="toOrderLst(4)">
						<view class="order-des">今日退款未处理订单</view>
						<view class="order-num">{{data.this_month_ship_order}}</view>
					</view>
				</view>
				<view class="f-row f-1 y-center nav-icon p-lr-30">
					<view class="footer-icon">
						<image mode="aspectFill" src="../../static/icons/monthorder_icon.png"></image>
					</view>
					<view class="f-column f-1 x-center" @click="toOrderLst(2)">
						<view class="order-des">本月待发货订单</view>
						<view class="order-num">{{data.today_all_return_order}}</view>
					</view>
				</view>
				<view class="f-row f-1 y-center nav-icon p-lr-30">
					<view class="footer-icon">
						<image mode="aspectFill" src="../../static/icons/monthrefund_icon.png"></image>
					</view>
					<view class="f-column f-1 x-center" @click="toOrderLst(4)">
						<view class="order-des">本月退款未处理订单</view>
						<view class="order-num">{{data.this_month_return_order}}</view>
					</view>
				</view>
			</view>
		</block>
		<loading-more :statusObject="statusObject" @reload="requestData"></loading-more>
	</view>
</template>

<script>
	let _this;
	import loadingMore from '../../components/loading-more.vue'
	import Other from '../../api/other.js'
	import ORDER from '../../api/order.js'
	import { navigate } from '../../lib/utils.js'
	const app = getApp();
	export default {
		components: {
			loadingMore
		},
		data() {
			return {
				date: new Date(),
				data: false,
				refreshClass: 'stopRefresh',
				statusObject: { status : 0 },
				systemInfo: {},
			}
		},
		onLoad() {
			_this = this;
			_this.systemInfo = app.globalData.systemInfo;
			console.log(this.$store.state);
		},
		onShow() {
			_this.requestData();
		},
		computed: {
			todayDateStr: function() {
				return (_this.date.getMonth() + 1) + '月' + _this.date.getDate() + '日';
			}
		},
		methods: {
			toOrderLst(status) {
				_this.$navigate('order-list','switchTab',{ status })
			},
			requestData() {
				Other.merChantOrder().then((res) => {
					console.log(res);
					_this.data = res;
					app.globalData.merchantMainData = res;
					_this.statusObject = { status : 4 }; 
				}).catch((err) => {
					_this.statusObject = { status : -1 };
					console.log(err);
				});
			},
			refreshData() {
				_this.refreshClass = 'startrefresh';
				Other.merChantOrder().then((res) => {
					console.log(res);
					_this.data = res;
					app.globalData.merchantMainData = res;
				}).catch((err) => {
					console.log(err);
					setTimeout(() => {
						_this.refreshClass = 'stoprefresh';
					},1000);
				}).then(() => {
					setTimeout(() => {
						_this.refreshClass = 'stoprefresh';
					},1000);
				});
			},
			//搜索栏按钮的函数
			actionClick(e) {
				if (e.type == 'scanQRcode') {
					uni.scanCode({
						onlyFromCamera: true,
						scanType: ['qrCode'],
						onlyFromCamera: false,
						success: (suc) => {
							console.log(suc);
							uni.showModal({
								content: '确认核销此订单吗？',
								confirmText: '确定',
								cancelText: '取消',
								success: (choose) => {
									console.log(choose);
									if (choose.confirm) {
										ORDER.orderVerify({
											orderVerifyId: suc.result
										}).then((res) => {
											console.log(res);
										}).catch((err) => {
											_this.$utils.showToast(err.data.message);
										});
									} else {
										_this.$utils.showToast('已取消');
									}

								}
							});
						}
					});
				}
			}

		}
	}
</script>

<style>
	.blue-bg {
		position: absolute;
		background: linear-gradient(to bottom, #0388ff, #02a7ff);
		top: 0;
		left: 0;
		right: 0;
	}

	.header {
		display: flex;
		flex-direction: column;
		position: relative;
		padding-bottom: 60rpx;
		z-index: 99;
	}

	.the-date {
		height: 250rpx;
		padding-left: 30rpx;
		font-size: 58rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 250rpx;
		text-align: center;
		/* background-color: #007AFF; */ 
	}

	.data-operation {
		height: 250rpx;
	}

	.refresh-data {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.merchant-msg {
		display: flex;
		flex-direction: column;
		text-align: left;
	}
	.refresh-data , .merchant-msg {
		min-width: 220rpx;
	}

	.merchant-msg image,
	.refresh-data image {
		height: 40rpx;
		width: 40rpx;
	}

	.merchant-msg .des,
	.refresh-data .des {
		color: #FFFFFF;
		font-size: 26rpx;
		min-width: 150rpx;
	}
	.refresh-data .des {
		margin-left: 15rpx;
	}

	.header-data view {
		color: #FFFFFF;
	}

	.data-des {
		font-size: 26rpx;
		line-height: 40rpx;
	}

	.bold-data {
		line-height: 100rpx;
		font-weight: bold;
		font-size: 42rpx;
	}

	.thin-data {
		line-height: 80rpx;
		font-weight: bold;
		font-size: 38rpx;
	}

	.footer {
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		z-index: 88;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.footer-icon {
		height: 100rpx;
		width: 100rpx;
		margin-right: 50rpx;
	}

	.footer-icon image {
		height: 100rpx;
		width: 100rpx;
	}

	.order-des,
	.order-num {
		line-height: 50rpx;
		font-size: 32rpx;
	}

	.order-num {
		color: #0388ff;
	}

	/* 	.nav-icon:active {
		background-color: unset;
	} */
	.startrefresh {
		animation: refresh 1s linear infinite;
	}

	@keyframes refresh {
		from {
			transform: rotate(0);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>
